<template>
	<view class="myjifen">
		<headertop str1="oridei" title="我的积分"></headertop>
		<view class="topimg">
			<image src="http://shop.hacuu.com/static/Group 11614@2x.png" class="topimg_backimg" mode="widthFix"></image>
			<view class="jinetext">
				<view class="title1">
					<image src="http://shop.hacuu.com/static/download 26@2x.png" class="jinbi" mode=""></image>
					<view class="t1">
						当前账户余额
					</view>
				</view>
				<view class="money">
					{{userobj.score}}
				</view>
			</view>
			<view class="jifenmxbox">
				<view class="centerbox">
					<view class="topline">
						<view class="box">

						</view>
						<view class="tt">
							积分明细
						</view>
					</view>
					<view class="msgicon" v-if="!list.length">
						<image src="http://shop.hacuu.com/static/Frame@2x(21).png" mode="widthFix"></image>
						<view class="msgtext">
							暂无积分明细
						</view>
					</view>
					<view class="contentbox">
						<view class="itemline" v-for="(item,index) in list" :key="index">
							<view class="texts">
								<view class="t1">
									{{item.memo}}
								</view>
								<view class="t2">
									{{item.createtime}}
								</view>
							</view>
							<view class="fen">
								+{{item.amount}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		jifenrecord,
		userinfo
	} from '@/api/my.js'
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'

	import {
		ref,
		reactive
	} from 'vue'
	const query = reactive({
		type: 'score',
		list_rows: '10',
		page: 1
	})
	const lastpage = ref(0)
	const list = ref([])
	const userobj = ref({})
	const jifenyy = ref({})
	onLoad(() => {
		init()
		getuser()
	})
	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	onPageScroll(() => {
		if (lastpage.value > query.page) {
			query.page++
			initlist()
		}
	})
	async function init() {
		const res = await jifenrecord(query)
		if (res.code == 1) {
			list.value.push(...res.data.list.data)
			jifenyy.value = res.data
			lastpage.value = res.data.list.last_page
		}
	}
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.myjifen {
		width: 100%;
		overflow: hidden;

		.topimg {
			width: 100%;
			overflow: hidden;
			position: relative;

			&_backimg {
				width: 100%;
				height: 464rpx;
				position: absolute;
				z-index: -1;
			}

			.jifenmxbox {
				width: 100%;
				overflow: hidden;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				background: #FFFFFF;
				margin-top: 45rpx;

				.centerbox {
					width: 686rpx;
					margin: auto;
					overflow: hidden;

					.topline {
						width: 100%;
						overflow: hidden;
						display: flex;
						align-items: center;
						margin-top: 34rpx;

						.box {
							width: 4rpx;
							height: 32rpx;
							background: #D8A278;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
						}

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #1D2129;
							margin-left: 16rpx;
						}
					}

					.contentbox {
						width: 100%;
						overflow: hidden;
						margin-top: 28rpx;
						background: #F7F8FA;
						border-radius: 24rpx 24rpx 24rpx 24rpx;

						.itemline {
							width: 630rpx;
							margin: auto;
							height: 152rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 2rpx solid #FFFFFF;

							.texts {
								width: 252rpx;
								overflow: hidden;

								.t1 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #1D2129;
								}

								.t2 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #86909C;
									margin-top: 16rpx;
								}
							}

							.fen {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 36rpx;
								color: #D5151A;
							}
						}
					}
				}
			}

			.jinetext {
				width: 686rpx;
				margin: auto;
				margin-top: 236rpx;
				overflow: hidden;

				.title1 {
					width: 100%;
					display: flex;
					align-items: center;

					.jinbi {
						width: 40rpx;
						height: 40rpx;
					}

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #98590C;
					}
				}

				.money {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 60rpx;
					color: #98590C;
					margin-top: 50rpx;
				}
			}
		}
	}
</style>